<!-- TODO: hyy -->
<script setup>
/**
 * @libs
 */
import { nextTick, ref } from 'vue'

/**
 * @data
 */
let compMess = ref({
  'part12Title':{
    "title": "商城生活在你身边",
  },
  'orderBtn': {
    "buttonText": "立即订购",
    "link": $szcyydsUrl,
    //是否新标签跳转
    "isNewTab": false,
  },
  "orderItems": [
    {
      "cover": "video_1.jpg",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    },
    {
      "cover": "video_2.png",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    },
    {
      "cover": "video_3.jpg",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    }
  ]
})


/**
 * 返回指定文件夹下的图片路径
 * @param {String} name 图片名称
 * @returns {String} 图片路径
 */
let getImgUrl = (name) => {
  return new URL(`/src/assets/images/mainImgs/homeImgs/part_12_imgs/${name}`, import.meta.url).href
}

/**
 * 链接跳转事件
 * @param {Boolean} isNewTab 是否新标签跳转
 * @param {String} link 链接地址
 */
let gotoNavtion = (isNewTab, link) => {
  if (isNewTab) {
    window.open(link)
  } else {
    window.location.href = link
  }
}

/**
 * 探索更多按钮点击事件
 * @param {Boolean} isNewTab 是否新标签跳转
 */
let orderButtonEvent = (isNewTab) => {
  gotoNavtion(isNewTab, compMess.value['orderBtn'].link)
}

/**
 * 商品点击事件
 * @param {Boolean} isNewTab 是否新标签跳转 
 * @param {String} link 链接地址
 */
let orderClickEvent = (isNewTab, link) => {
  gotoNavtion(isNewTab, link)
}

</script>
<template>
  <div class="part-12-class">
    <div class="part-12-class-part12Title">{{ compMess.part12Title.title }}</div>
    <div class="part-12-order-items-box">
      <div v-for="(item, index) in compMess['orderItems']" class="part-12-order-items">
        <div class="part-12-order-cover">
          <img :src="getImgUrl(item.cover)" class="part-12-order-cover-img" alt="">
          <div class="part-12-order-playBtn" @click="orderButtonEvent(compMess['orderBtn'].isNewTab)">{{
        compMess['orderBtn'].buttonText }}</div>
        </div>
        <div class="part-12-order-btn" @click="orderButtonEvent(compMess['orderBtn'].isNewTab)">{{
        compMess['orderBtn'].buttonText }}</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.part-12-class {
  width: 14rem;
  margin: 0 auto;
  height: 6.1rem;
  cursor: pointer;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.part-12-class-part12Title{
  width: 4.7rem;
  height: 0.72rem;
  font-size: 0.44rem;
  font-weight: 600;
  line-height: 0.66rem;
}

.part-12-order-btn {
  width: 1.44rem;
  height: 0.48rem;
  border-radius: 0.4rem;
  background-color: #6BC2B4;
  border: #6BC2B4 solid 0.01rem;
  font-weight: 500;
  font-size: 0.16rem;
  color: #fff;
  text-align: center;
  line-height: calc(0.48rem - 0.02rem);
}

.part-12-order-items-box {
  width: 14rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 5.3rem;
  position: relative;
  overflow: hidden;
}

.part-12-order-cover-img,
.part-12-order-cover {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 0.32rem;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.part-12-order-items {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.part-12-order-playBtn{
  position: absolute;
  content: '';
  top: 1.9rem;
  left: 1.9rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 0.01rem solid #fff ;
}
.part-12-order-playBtn::after{
  content: '';
  position: absolute;
  top: 0.15rem;
  left: 0.21rem;
  width: 0.19rem;
  height: 0.24rem;
  border-style: solid;
  border-width: 0.15rem 0 0.15rem 0.2rem;
  border-color: transparent transparent transparent #fff;
}

</style>